<div style="width: 98%;background-color:#fff;margin: 20px auto;">
    <form class="layui-form" action="" style="padding: 34px">
        <button class="layui-btn layui-btn-danger" type="button" onclick="popUp()">添加商品</button>
        <button class="layui-btn layui-btn-primary" type="button" onclick="resetData()">重置</button>
        <table class="layui-table" lay-skin="line">
            <thead>
            <tr>
                <th>商品LOGO</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {foreach $selGoods as $key=>$vo }
            <tr>
                <td><img src="{$vo.logo}"></td>
                <td>{$vo.title}</td>
                <td>{$vo.price}</td>
                <td>
                    <div class="number-box">
                        <input type="button" class="on-number" value="-" data-item="{$key}" data-v="-1">
                        <input type='text' name="num" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" lay-verify="required" oninput="nunKey(value,{$key})">
                        <input type="button" class="on-number" value="+" data-item="{$key}" data-v="1">
                    </div>
                </td>
                <td><button class="layui-btn layui-btn-sm layui-btn-danger" type="button" onclick="removeGoods({$vo.id})">移除</button></td>
            </tr>
            {/foreach}
            </tbody>
        </table>
        <div class="layui-form-item">
            <label class="layui-form-label">会员码</label>
            <div class="layui-input-block">
                <input type="text" id="UidInput" name="uid" value="{$inpUid}" onchange="getMember()" required  lay-verify="required" placeholder="请扫描会员码" onkeydown="if(event.keyCode==13){this.blur();return false;}" autocomplete="off" class="layui-input">
            </div>
        </div>

        {if strtoupper(count($getMember)) > 0}
        <div class="layui-form-item">
            <label class="layui-form-label">选择会员卡</label>
            <div class="layui-input-block">

                <div style="display: flex">
                {foreach $getMember as $key=>$vo }
                    <div style="margin-right: 20px;">
                        <input type="radio" name="mid" value="{$vo.id}" title="{$vo.card_name}" checked>
                        <div>过期时间：{$vo.expire_time}</div>
                    </div>
                {/foreach}
                </div>
            </div>
        </div>
        {/if}

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" style="margin: 0 auto;display: block">生成线下订单</button>
            </div>
        </div>
    </form>
</div>

<div id="popup" style="margin: 5%; display: none">
    <table class="layui-hide" id="popTable" lay-filter="checkboxDemo"></table>
</div>

<script type="text/html" id="imgtmp">
    <img src="{{d.logo}}" style="width: 50px">
</script>
<script>
    var arr = '<?php echo json_encode($goodsData) ?>'
    var nav = JSON.parse(arr);
    var checkArr = [];

    var goodsArr = '<?php echo json_encode($selGoods) ?>'
    var goodsNav = JSON.parse(goodsArr);
    goodsNav.forEach(function(item,index) {
        goodsNav[index].goods_num = 1
    });

layui.use(['form','table'], function(){
    var form = layui.form;
    var table = layui.table;

    form.render(); //更新全部
    form.render('radio'); //刷新select选择框渲染


//生成线下订单
    form.on('submit(formDemo)', function(data){
        const Uid = document.getElementById("UidInput").value;
        var mid = 0;
        const midArr = document.getElementsByName("mid");
        for(let i = 0; i < midArr.length; i++) {
            // 如果单选按钮被选中，输出它的值
            if(midArr[i].checked) {
                mid = midArr[i].value
                break;
            }
        }
      $.ajax({
        type : "POST",
        url : "/shop/Off_Line/submit",
        data : {
            'goodsNav' : goodsNav,
            'uid' : Uid,
            'mid' : mid
        },
        success : function(res) {
            if (res.code == 0 || res.code == 100 || res.code == 500){
                layer.msg(res.msg, {icon:2, time: 1000});
                setTimeout(function(){
                    location.reload();
                },1000);
            }else if (res.code == 1 || res.code == 200){
                console.log(res)
                layer.msg(res.msg, {icon:1, time: 1000});
                setTimeout(function(){
                    location.reload();
                },1000);
            }
        },
        error : function(e){
            layer.msg('提交失败', {icon:2, time: 1000});
            console.log(e.status);
            console.log(e.responseText);
        }
      });
      return false;
    });

//弹窗表格
    table.render({
        elem: "#popTable",//绑定table的id
        data:nav,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field:'logo', title: '商品图片', fixed: true,align: 'center', templet: "#imgtmp",width:200},
            {field:'title', title: '商品名称', sort: true,width:200},
            {field:'price', title: '价格', sort: true,width:200}
        ]],
        page: true //开启分页
    });


});

//弹窗
function popUp(){
    layer.open({
        title:'选择商品',
        type: 1,
        area: ['800px', '670px'],
        btn: ['确定', '取消'],
        shadeClose: true,
        shade: 0 ,//遮罩透明度
        content: $("#popup"), //这里content是一个普通的String
        yes:function(index,layero){
            for(var i = 0; i<nav.length;i++) {
                nav[i].LAY_CHECKED == true && checkArr.push(nav[i].id);
            }
            $.ajax({
                type : "POST",
                url : "/shop/off_line/getCheckData",
                data : {'checkArr' : checkArr},
                success : function(result) {
                    location.reload();
                },
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
            layer.close(index); //如果设定了yes回调，需进行手工关闭
        }
    });
};
//重置
function resetData(){
    $.ajax({
        type : "POST",
        url : "/shop/off_line/resetData",
        data : {},
        success : function(res) {
            layer.msg(res.msg, {icon:1, time: 1000});
            setTimeout(function(){
                location.reload();
            },1000);
        },
        error : function(e){
            layer.msg('重置失败', {icon:2, time: 1000});
        }
    });
}
//移除选择商品
function removeGoods(id){
    console.log(id)
    $.ajax({
        type : "POST",
        url : "/shop/off_line/reCheckData",
        data : {'id' : id},
        success : function(result) {
            location.reload();
        },
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });
};

function getMember(){
    var uid = $("#UidInput").val()
    $.ajax({
        type : "POST",
        url : "/shop/off_line/getUidMember",
        data : {'uid' : uid},
        success : function(res) {
            console.log(res)
            location.reload();
        },
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });
}

function nunKey(val,item){
    goodsNav[item].goods_num = val
    console.log(goodsNav[item])
}

</script>
<script>
    $(document.documentElement).on("click", ".on-number", function() {
        var item = $(this).data("item");
        var $val = $(this).siblings("input[type='text']"),
            val = parseInt($val.val(), 10) + parseInt($(this).data("v"));
            if(val <=0 ){
               val = 1
            }
        $val.val(isNaN(val) ? 0 : val);
        goodsNav[item].goods_num = parseInt($val.val(), 10)
    });
</script>

<style>
    .layui-table-cell {
        height:auto;
    }
    body {
	margin:0;
	padding:0;
	font-size:14px;
	font-family:'Microsoft YaHei','Times New Roman',Times,serif;
	letter-spacing:0;
}
ol {
	margin:0;
	padding:20px 0 20px 30px;
}
ol>li {
	margin:0 0 10px 0;
}
.number-box {
	border:#e5e5e5 solid 1px;
	display:inline-block;
	overflow:hidden;
}
.number-box input[type='text'] {
	height:30px;
	border-top:none;
	border-bottom:none;
	border-left:#e5e5e5 solid 1px;
	border-right:#e5e5e5 solid 1px;
	margin:0;
	text-align:center;
	width:40px;
	outline:none;
	padding:0 5px;
	float:left;
	line-height:30px;
}
.number-box input[type='button'] {
	height:30px;
	width:40px;
	float:left;
	border:none;
	outline:none;
	background-color:#f3f3f3;
	line-height:30px;
	cursor:pointer;
	padding:0;
}
.number-box input[type='button']:hover {
	background-color:#f9f9f9;
}
.number-box input[type='button']:active {
	background-color:#f6f6f6;
}

</style>
